<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        #recom{
           background-color: white;
            margin-left: 200px;
            width: 60%;
            height: 1000px;
            display: inline-block;
        }
    </style>
</head>
<body>

<nav class="navbar  bg-dark navbar-dark ">
    <ul  class="nav ">

        <li class="nav-item1">
            <a style="color: red;font-size: 30px" class="nav-link" href="#">头条号</a>
        </li>

            <li style="margin-left: 200px;margin-top: 10px" class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
                    发布问答
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">文章</a>
                    <a class="dropdown-item" href="#">视频</a>
                    <a class="dropdown-item" href="#">微头条</a>
                    <a class="dropdown-item" href="#">音频</a>

                </div>
            </li>

    </ul>
    <ul class="nav justify-content-end">
        <li style="margin-right: 100px" class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                消息
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">系统通知</a>
                <a class="dropdown-item" href="#">评论</a>
                <a class="dropdown-item" href="#">粉丝</a>
                <a class="dropdown-item" href="#">点赞</a>
                <a class="dropdown-item" href="#">@我</a>
                <a class="dropdown-item" href="#">私信</a>
                <a class="dropdown-item" href="#">问答邀请</a>
            </div>
        </li>
    </ul>
    </ul>
</nav>
<div style="margin-top: 0" class="jumbotron jumbotron-fluid">
    <div class="container">

        <div id="recom">

            <!-- Tab panes -->
            <div class="tab-content">
                <div id="home" class="container tab-pane active"><br>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#">推荐</a>
                        </li>
                        <li class="nav-item">
                            <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#">热点</a>
                        </li>
                        <li class="nav-item">
                            <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#">最新</a>
                        </li>
                        <li class="nav-item">
                            <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#">邀请我答</a>
                        </li>
                        <li class="nav-item">
                            <a style="color: #0b2e13" class="nav-link" data-toggle="tab" href="#">收藏</a>
                        </li>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="搜索你感兴趣的问题">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">提问</button>
                            </div>
                        </div>
                        <div style="margin-bottom: 15px">
                            <button type="button">全部推荐</button>
                            <button type="button" style="margin-left: 50px"> + 添加擅长领域</button>
                        </div>
                    </ul>
                    <div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>

                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>

                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>

                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>

                            </li>
                            <li class="list-group-item">
                                <div>
                                    <h5><a href="">这是问题</a></h5>
                                </div>
                                <div style="margin-left: 450px">
                                    <span>查看问题</span>
                                    <span>收藏问题</span>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
</body>
</html>

